<template>
  <div class="app-container">
    <!--工具栏-->
    <el-card
      shadow="hover"
      class="maBt15"
      v-if="
        checkPermission(['agreements@index']) && $store.state.user.queryShow
      "
    >
      <el-form inline>
        <!-- 协议名称 -->
        <el-form-item
          :label="$t('protocolManagement.protocolManagement1')"
          style="margin-bottom: 0"
        >
          <el-input
            v-model="formInline.name"
            clearable
            :placeholder="$t('protocolManagement.protocolManagement1')"
            style="width: 150px"
            class="filter-item"
          ></el-input>
        </el-form-item>
        <!-- 位置 -->
        <el-form-item
          :label="$t('openPreparation.openPreparation1')"
          style="margin-bottom: 0"
        >
          <el-select
            v-model="formInline.type"
            :placeholder="$t('openPreparation.openPreparation1')"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="item in xieyinMode"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-button class="filter-item" type="primary" @click="toQuery">{{
          $t("common.common4")
        }}</el-button>
      </el-form>
    </el-card>
    <el-card shadow="hover">
      <div slot="header" class="clearfix operateBtn">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="toAddEdit()"
          v-permission="['agreements@save']"
          >{{ $t("common.common18") }}</el-button
        >
        <query-btn />
      </div>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
        highlight-current-row
        :max-height="$store.state.app.tableHeight"
        v-permission="['agreements@index']"
      >
        <el-table-column prop="id" min-width="80" fixed="left" label="ID" />
        <!-- 位置 -->
        <el-table-column
          prop="type"
          min-width="150"
          :label="$t('openPreparation.openPreparation1')"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.type | release(xieyinMode) }}</span>
          </template>
        </el-table-column>
        <!-- 协议名称 -->
        <el-table-column
          prop="name"
          min-width="180"
          :label="$t('protocolManagement.protocolManagement1')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row["name_" + $store.state.settings.langTail]
            }}</span>
          </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column
          prop="created_at"
          min-width="200"
          :label="$t('vip.vip4')"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.created_at) }}</span>
          </template>
        </el-table-column>
        <!-- 更新时间 -->
        <el-table-column
          prop="updated_at"
          min-width="200"
          :label="$t('openPreparation.openPreparation5')"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updated_at) }}</span>
          </template>
        </el-table-column>
        <!--   操作   -->
        <el-table-column
          :label="$t('common.common3')"
          min-width="120px"
          align="center"
          fixed="right"
          class-name="iconBtn"
          v-if="checkPermission(['agreements@read', 'agreements@delete'])"
        >
          <template slot-scope="scope">
            <span
              @click="toAddEdit(scope.row.id)"
              v-permission="['agreements@read']"
            >
              <!-- 编辑 -->
              <btn-tip
                :content="$t('common.common20')"
                type="primary"
                icon="el-icon-edit"
              ></btn-tip>
            </span>
            <span
              @click="delList(scope.row.id)"
              v-permission="['agreements@delete']"
            >
              <!-- 删除 -->
              <btn-tip
                :content="$t('common.common9')"
                type="danger"
                icon="el-icon-delete"
              ></btn-tip>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination
        v-permission="['agreements@index']"
        :total="tableShow.listCount"
        :page.sync="tableShow.currentPage"
        :page-size.sync="tableShow.pageSize"
        @pageChange="getList"
      />
    </el-card>
    <!--表单渲染-->
    <add-edit ref="add_edit" />
  </div>
</template>

<script>
import AddEdit from "./add_edit";
import { parseTime } from "@/utils/index";
import { getCusList, deleteItem } from "@/api/systems/protocolManagement";
import { xieyinMode } from "@/assets/js/common";

export default {
  components: {
    AddEdit,
  },
  data() {
    return {
      xieyinMode,
      loading: false,
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0,
      },
      tableData: [],
      formInline: {
        name: "",
        type: "",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    parseTime,
    // 行拖拽
    getList() {
      this.loading = true;
      getCusList(
        Object.assign({}, this.formInline, {
          page: this.tableShow.currentPage,
          limit: this.tableShow.pageSize,
        })
      )
        .then((res) => {
          if (res.code == 10000) {
            this.tableData = res.data;
            this.loading = false;
            this.tableShow.listCount = res.count;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    toQuery() {
      this.tableShow.currentPage = 1;
      this.getList();
    },
    delList(id) {
      var userIds = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.id;
          });
      this.$confirm(
        // `确定对[id=${userIds.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        // "确定删除？",
        `${this.$t("common.common13")}[id=${userIds.join(",")}]${this.$t(
          "common.common14"
        )}[${
          id ? this.$t("common.common9") : this.$t("common.common12")
        }]${this.$t("common.common15")}?`,
        this.$t("common.common10"),
        {
          confirmButtonText: this.$t("common.common2"),
          cancelButtonText: this.$t("common.common1"),
          type: "warning",
        }
      )
        .then(() => {
          deleteItem(userIds.join(",")).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消删除
            message: this.$t("common.common11"),
          });
        });
    },
    toAddEdit(rowID) {
      this.$refs.add_edit.init(rowID);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>